<template>
  <el-scrollbar height="4rem" style="width: 100%;min-height: 2rem">
    <soul-magic-mark-bar show-detail :building="isKp" :mark="magic.startMark"
                         @left-add="(i)=>{addLeft(i)}"
                         @mark-click="(i)=>{
                           if(i.length!==0){
                             this.tabsMarkKeyStack=getTarget(i)
                             this.tabsMark=this.$store.getters.cardData(this.cardIndex,getTarget(i));
                             this.tabsMarkParent=this.$store.getters.cardData(this.cardIndex,getTarget(i.slice(0,i.length-2)))
                             this.showTab='mark';
                             this.markType=(this.tabsMark.markType!=='empty')?this.tabsMark.markType:''
                             if(Object.keys(localMarkType).find((ele)=>{return ele===markType})==null){
                               this.markType=''
                             }
                           }else {
                             this.showTab='magic'
                           }}"
                         @right-add="(i)=>{addRight(i)}"
                         @delete="(i)=>{deleteMark(i)}"></soul-magic-mark-bar>
  </el-scrollbar>

  <el-tabs :model-value="showTab">
    <el-tab-pane name="magic" label="魔法属性">
      <template #default>

        <default-bar name="名称" focus-text :value-key-stack="['soulMagic',magicIndex,'name']"></default-bar>
        <el-popover trigger="click">
          <template #reference>
            <default-bar name="ap" focus-text :value-key-stack="['soulMagic',magicIndex,'ap']"></default-bar>
          </template>
          <template #default>
            总复杂度(留空的可变值已计入)：{{ totalComplexity(magic.startMark) }}<br>
            相应ap:{{ Math.ceil(totalComplexity(magic.startMark) / 5) }}
            <el-button :disabled="!isKp"
                       @click="commit(Math.ceil(totalComplexity(magic.startMark)/5),['soulMagic',magicIndex,'ap'])">填入
            </el-button>
          </template>
        </el-popover>
        <el-popover trigger="click">
          <template #reference>
            <default-bar name="mp" focus-text :value-key-stack="['soulMagic',magicIndex,'mp']"></default-bar>
          </template>
          <template #default>
            总mp：{{ getMp(magic.startMark) }}
            <el-button :disabled="!isKp" @click="commit(getMp(magic.startMark),['soulMagic',magicIndex,'mp'])">填入
            </el-button>
          </template>
        </el-popover>
        <el-popover trigger="click">
          <template #reference>
            <default-bar name="效果" text focus-text
                         :value-key-stack="['soulMagic',magicIndex,'effect']"></default-bar>
          </template>
          <template #default>
            可变量：
            <template v-for="changeAble in allChangeAble(magic.startMark)">
              <br>{{ changeAble }}
            </template>
          </template>
        </el-popover>

      </template>
    </el-tab-pane>
    <template v-if="tabsMark!==undefined">
      <el-tab-pane name="mark" :label="tabsMark.name">
        <template #default>
          <el-select placement="top"
                     v-model="markType"
                     :disabled="!isKp"
                     @change="()=>{this.commit((ele)=>{
                       Object.assign(ele,SoulMark(markType,tabsMark.subMark))
                     },tabsMarkKeyStack)}"
                     placeholder="更改类型（新刻印请优先选择此项）">
            <el-checkbox v-model="doCheckRank" label="匹配rank"></el-checkbox>
            <el-checkbox v-model="doCheckUseAble" label="仅显示可用"></el-checkbox>
            <el-option v-if="Object.keys(localMarkType).length===0" value="empty" disabled
                       label="没有可用刻印"></el-option>
            <el-popover v-for="key in Object.keys(localMarkType)">
              <template #reference>
                <el-option :value="key"
                           :label="localMarkType[key].name"></el-option>
              </template>
              {{ localMarkType[key].effect }}
            </el-popover>
          </el-select>
          <default-bar name="名称" focus-text :value-key-stack="[...tabsMarkKeyStack,'name']"></default-bar>
          <default-bar name="复杂度" focus-text :value-key-stack="[...tabsMarkKeyStack,'complexity']"></default-bar>
          <default-bar v-if="typeof tabsMark.mp !== 'function'" name="mp" focus-text
                       :value-key-stack="[...tabsMarkKeyStack,'mp']"></default-bar>
          <default-bar name="mp（子刻印合计）" :value="getMp(tabsMark)" disable focus-text></default-bar>
          <default-bar placeholder="留空表示可在发动时更改" focus-text v-for="key in Object.keys(tabsMark.changeAble)"
                       :name="key" :value-key-stack="[...tabsMarkKeyStack,'changeAble',key]"></default-bar>

        </template>
      </el-tab-pane>
    </template>

  </el-tabs>

</template>
<script>
import {allChangeAble, checkMark, getMp, SoulMagic, SoulMark, totalComplexity} from "@/js/soulMagic";
import SoulMagicMarkBar from "@/components/bar/SoulMagicMarkBar";
import {store} from "@/js/store";
import DefaultBar from "@/components/bar/DefaultBar";

export default {
  name: "SoulMagicBar",
  components: {DefaultBar, SoulMagicMarkBar},
  props: {
    magic: SoulMagic(),
    magicIndex: Number
  },
  inject: ['cardIndex', 'isKp'],
  data() {
    return {
      tabsMark: undefined,
      tabsMarkParent: undefined,
      tabsMarkKeyStack: [],
      markType: '',
      doCheckRank: true,
      showTab: 'magic',
      doCheckUseAble: true
    }
  },
  methods: {
    getTarget(indexStack) {
      let out = ['soulMagic', this.magicIndex, 'startMark']
      for (const index of indexStack) {
        out.push('subMark')
        out.push(index)
      }
      return out
    },
    deleteMark(indexStack) {
      let markIndex = indexStack[indexStack.length - 1]
      let parent = this.getTarget(indexStack.slice(0, indexStack.length - 1))
      this.tabsMark = undefined
      this.showTab = "magic"
      this.commit((ele) => {
        ele.splice(markIndex, 1, ...ele[markIndex].subMark)
      }, [...parent, 'subMark'])
    },
    addRight(indexStack) {
      let mark = this.getTarget(indexStack)
      this.commit((ele) => {
        ele.push(SoulMark('empty'))
      }, [...mark, 'subMark'])
    },
    addLeft(indexStack) {
      let markIndex = indexStack[indexStack.length - 1]
      let parent = this.getTarget(indexStack.slice(0, indexStack.length - 1))
      this.commit((ele) => {
        let newMark = SoulMark('empty')
        newMark.subMark.push(ele[markIndex])
        ele.splice(markIndex, 1, newMark)
      }, [...parent, 'subMark'])
    },
    commit(data, keyStack) {
      store.commit('cardData', {index: this.cardIndex, keyStack: keyStack, data: data})
    },
    getMp, SoulMark, totalComplexity, allChangeAble
  },
  computed: {
    cardData() {
      return store.getters.cardData(this.cardIndex, [])
    },
    soulMagicMarkType() {
      return store.state.soulMagicMarkType
    }
    ,
    localMarkType() {
      let outKeys = [...Object.keys(this.soulMagicMarkType)]
      if (this.doCheckRank) {
        outKeys = outKeys.filter((key) => {
          return this.cardData.soulMagicLevel >= this.soulMagicMarkType[key].rank
        })
      }
      if (this.doCheckUseAble) {
        let check = checkMark(this.tabsMarkParent)
        let unusableMark = check[0]
        let unusedMark = check[1]
        if (unusableMark.indexOf(this.tabsMark) === -1) {
          unusedMark.push(this.tabsMark.need)
        }

        outKeys = outKeys.filter((key) => {
          return unusedMark.indexOf(this.soulMagicMarkType[key].need) !== -1
        })
      }
      let out = {}
      for (const outKey of outKeys) {
        out[outKey] = this.soulMagicMarkType[outKey]
      }
      return out
    }
  }
}
</script>

<style scoped>

</style>
